<template>
  <div>
    <!-- 顶部导航 -->
    <van-nav-bar :title="comment.reply_count?comment.reply_count+'条回复':'暂无回复'">
      <template #left>
        <van-icon
          name="cross"
          size="18"
          @click="$emit('closePop')"
        />
      </template>
    </van-nav-bar>
    <!-- 中间部分 s -->
    <div class="scroll-wrap">
      <!-- 评论项组件 -->
      <commentItem :comment='comment'></commentItem>
      <!-- 评论的回复 -->
      <van-cell title="全部回复" />
      <ArticleCommment
        :type='"c"'
        :source='comment.com_id'
        :list='list'
      ></ArticleCommment>
    </div>
    <!-- 中间部分 e -->
    <!-- 发布评论 -->
    <div class="post-warp">
      <van-button
        round
        @click="isShowReplyPop=true"
      >评论</van-button>
    </div>
    <!-- /发布评论 -->
    <!-- 回复评论的弹层 -->
    <van-popup
      v-model="isShowReplyPop"
      position="bottom"
    >
      <ArticlePost
        :target='comment.com_id'
        :artId='$route.params.articleId'
        @onPostSuccess='onPostSuccess'
      ></ArticlePost>
    </van-popup>
  </div>
</template>

<script>
import commentItem from '@/components/comment-item.vue'
import ArticleCommment from './article-comment.vue'
import ArticlePost from './article-post.vue'
export default {
  props: {
    // articles 父组件传过来的评论对象
    comment: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      // 存放评论的数组
      list: [],
      isShowReplyPop: false
    }
  },
  methods: {
    onPostSuccess (e) {
      // 关闭弹窗
      this.isShowReplyPop = false
      // 把回复结果添加到评论数组里
      this.list.unshift(e)
      // 回复数量累加
      this.comment.reply_count++
    }
  },
  computed: {},
  watch: {},
  filters: {},
  components: {
    commentItem,
    ArticleCommment,
    ArticlePost
  },
  created () { },
  mounted () { }
}
</script>

<style scoped lang='less'>
.post-warp {
  width: 100%;
  height: 100px;
  position: fixed;
  bottom: 0;
  border-top: 1px solid #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: chocolate;
  .van-button {
    width: 640px;
    height: 80px;
  }
}
.scroll-wrap {
  position: fixed;
  top: 92px;
  bottom: 102px;
  overflow-y: scroll;
  width: 100%;
}
</style>
